import { getRestaurantOrderApi, RestaurantOrder } from '@/service/user';
import React, { useCallback, useEffect, useState } from 'react';
import LineChart from './IndexPageTable';
import BingEch from './piePlot';

const App: React.FC = () => {
  const [monthSales, setMonthSales] = useState<RestaurantOrder | null>(null);
  const userId = localStorage.id;

  const fetchData = useCallback(async () => {
    const res = await getRestaurantOrderApi(userId);
    setMonthSales({
      list: res,
    });
    debugger;
  }, [monthSales]);

  useEffect(() => {
    fetchData();
  }, [fetchData]);

  return (
    <div>
      {monthSales && monthSales.list && (
        <div style={{ flex: 1 }}>
          <BingEch {...monthSales} />
        </div>
      )}
      <LineChart></LineChart>
    </div>
  );
};

export default App;
